<!doctype html>

<!--
  This is a simple example / template impress.js slide show. The goal is to be
  easier to read for a first timer than the official and very feature rich
  demo by bartaz (http://bartaz.github.io/impress.js/). It's also a very
  traditional presentation that looks like slides (square screens with bullet
  points...), again to make a first timer feel more at home. From this simple
  presentation you can then go on to more powerful impress.js presentations!

  This example is hopefully helpful for people that want to create both
  simple and (eventually) awesome presentations in impress.js and comfortable
  doing that directly in HTML.

  By: @henrikingo (Still based on the HTML from bartaz' demo.)

-->

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>A Study in 3D Rotations| by Henrik Ingo @henrikingo</title>
    <meta name="description" content="Explore impress.js in 3D"/>
    <meta name="author" content="Henrik Ingo"/>
    <link href="css/impress-demo.css" rel="stylesheet"/>
    <link href="css/3D-rotations.css" rel="stylesheet"/>
    <style>
        .step p {
            font-size: 28px;
        }

        .fontsize28 {
            font-size: 28px;
        }

        .fontsize20 {
            font-size: 22px !important;
        }
    </style>
</head>

<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified
        version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<div id="impress" data-transition-duration="2000">


    <div id="overview2" class="step overview" data-x="2018" data-y="106" data-z="3018" data-scale="2" style="color: #fff;">
        <br>
        <br>
        <h1>员工晋升报告</h1>
        <br>
        <h3>&nbsp;&nbsp;员工：李&nbsp;&nbsp;哲 <span style="display: inline-block;width: 130px;height: 20px"></span></h3>
        <h3>职位：web前端工程师</h3>
        <h3>日期：2019年3月15日</h3>
    </div>

    <div id="step-1" class="step" data-x="0" data-y="0" data-z="0"
         data-goto-prev="step-8">
        <p class="fontsize28">自我介绍</p>
        <p class="fontsize28">
            尊敬的各位领导，亲爱的同事们：大家好！我是BIM部门web前端工程师李哲，
            很荣幸于2018年3月15日正式加入陕西中达公路这个大家庭，这也是我内心十分珍惜的人生际遇。
        </p>
        <p class="fontsize28">
            自我鉴定：热爱web前端开发，喜欢支持ORM的web开发框架，性格开朗，乐于合作，善于思考，具备高度工作责任感，抗压能力强，勇于接受挑战。
        </p>
    </div>

    <div id="step-2" class="step" data-x="420" data-y="-70" data-z="-250" data-rotate-z="45" data-rotate-y="-45"
         data-rotate-order="zyx">
        <p class="fontsize28">岗位职责与工作定位</p>
        <p>
            入职日期： 2018年3月15日
        </p>
        <p>
            工作定位：web前端工程师
        </p>
        <p style="
            font-size: 14px;
            line-height: 40px;
        ">
            岗位描述：<br>
            1.html+css+javascript对页面进行基本的结构布局和表现渲染,业务逻辑数据交互的实现; <br>
            2.利用jQuery以及jQuery插件实现页面中业务逻辑动画效果； <br>
            3.利用bootstrap实现页面的响应式布局； <br>
            4.利用angularJS进行数据双向绑定，以及数据交互； <br>
            5.利用vue2，elementUI，iviewUI, axios, vueX，sass，es6实现项目页面布局和以及数据交互； <br>
            6.使用git对代码版本控制。 <br>
            7.开发过程中及时与设计师，产品经理沟通，根据UI设计图实现到页面，及时与开发组沟通解决开发过程中的问题。 <br>
        </p>
    </div>

    <div id="step-3" class="step" data-x="700" data-y="350" data-z="-350" data-rotate-z="90" data-rotate-y="-90"
         data-rotate-order="zyx">
        <p>工作成果一</p>
        <p style="
            font-size: 16px;
            line-height: 28px;
        ">
            1.<a href="http://i1.bvimg.com/681152/f303b3f973206480.png" target="_blank">车管家pc端</a>第一版和第二版。angular1，jquery，bootstrap3+Ajax, 使用PS切图量图。
            <a href="http://i1.bvimg.com/681152/db23f3a152bb4db5.png" target="_blank" style="font-size: 12px;padding-right: 3px;">维修记录</a>
            <a href="http://i1.bvimg.com/681152/4834e003c567e282.png" target="_blank" style="font-size: 12px;padding-right: 3px;">维修记录图片预览</a>
            <a href="http://i1.bvimg.com/681152/47b59207193dd4b0.png" target="_blank" style="font-size: 12px;padding-right: 3px;">添加维修记录</a>
            <a href="http://i1.bvimg.com/681152/ed6cd773047427b5.png" target="_blank" style="font-size: 12px;padding-right: 3px;">车辆列表</a>
            <a href="http://i1.bvimg.com/681152/dcd8ed10d3c6784e.png" target="_blank" style="font-size: 12px;padding-right: 3px;">添加车辆</a>
            <a href="http://i2.bvimg.com/681152/0c6452d464be20fd.png" target="_blank" style="font-size: 12px;padding-right: 3px;">分析统计</a>
            <a href="http://i1.bvimg.com/681152/bc8161309b1c1569.png" target="_blank" style="font-size: 12px;padding-right: 3px;">司机端登录</a>
            <a href="http://i1.bvimg.com/681152/6464b626bf067894.png" target="_blank" style="font-size: 12px;padding-right: 3px;">维修记录—司机</a>
            <br>
            2.参与虚拟设计院pc端 项目的bug修复，协助王园做虚拟设计院响应式自适应的处理
            <br>
            3.车管家手机端，有车主端，司机端。
            <br>
            项目描述：使用angular+jQ+Ajax+rem.js对页面业务逻辑数据交互的实现, 使用PS切图量图。
            <br><span>版本一：</span>
            <a href="http://i1.bvimg.com/681152/97c6e76ff7fbc0bc.png" target="_blank" style="font-size: 12px;padding-right: 3px;">司机端登录</a>
            <a href="http://i1.bvimg.com/681152/6b5aefb5a8ddd81b.png" target="_blank" style="font-size: 12px;padding-right: 3px;">维修记录</a>
            <a href="http://i1.bvimg.com/681152/09d1c535ccf10711.png" target="_blank" style="font-size: 12px;padding-right: 3px;">添加维修记录</a>
            <br><span>版本二：</span>
            <a href="http://i2.bvimg.com/681152/607fd7c4d7c873a3.png" target="_blank" style="font-size: 12px;padding-right: 3px;">登录</a>
            <a href="http://i2.bvimg.com/681152/9e0d189e682aa979.png" target="_blank" style="font-size: 12px;padding-right: 3px;">注册</a>
            <a href="http://i2.bvimg.com/681152/ffd336890d8fc112.png" target="_blank" style="font-size: 12px;padding-right: 3px;">找回密码</a>
            <a href="http://i2.bvimg.com/681152/4f5b1b2b280bb5db.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">车辆列表</a>
            <a href="http://i2.bvimg.com/681152/949506c16d144197.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">编辑车辆</a>
            <a href="http://i2.bvimg.com/681152/f082f8b288061bf7.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">司机列表</a>
            <a href="http://i2.bvimg.com/681152/8aeba3885f1f3401.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">添加维修记录</a>
            <br>
            4.在现场第一版app 项目名称:bimOnline
            <br>
            项目描述：利用vue2+iviewUI+axios+sass
            实现项目页面和交互。然后用cordova打包app(cordova build android/ios )
            开发过程中及时与设计师沟通，根据设计图实现到页面，及时与开发组沟通解决开发过程中的问题。
            <br>
            <a href="http://i1.bvimg.com/681152/03a675b22802810d.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">登录</a>
            <a href="http://i1.bvimg.com/681152/8f9546e4b4c07121.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">注册</a>
            <a href="http://i1.bvimg.com/681152/024969c2122d190c.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">找回密码</a>
            <a href="http://i1.bvimg.com/681152/578d9d8b0066e741.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">我参与的项目</a>
            <a href="http://i1.bvimg.com/681152/24d2304fc6bf3ece.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">我创建的项目</a>
            <a href="http://i1.bvimg.com/681152/1a4534407c412dd6.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">我编辑的项目</a>
            <a href="http://i1.bvimg.com/681152/0e4802438bcd2a46.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">日志列表</a>
            <a href="http://i1.bvimg.com/681152/f5010b4aa94068dd.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">添加日志</a>
            <a href="http://i2.bvimg.com/681152/ab42f60819eb4a8f.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">我的好友</a>
            <a href="http://i1.bvimg.com/681152/e0bb260ffb5b2d4b.png" target="_blank" style="font-size: 12px;padding-right: 3px;">个人中心</a>
            <a href="http://i1.bvimg.com/681152/cf226f2177d3d177.jpg" target="_blank" style="font-size: 12px;padding-right: 3px;">关于我们</a>
        </p>
    </div>

    <div id="step-4" class="step" data-x="422" data-y="780" data-z="-250" data-rotate-z="135" data-rotate-y="-135"
         data-rotate-order="zyx">
        <p>工作成果二</p>
        <p style="
            font-size: 16px;
            line-height: 40px;
        ">
            1.在现场后台管理系统。项目名称: <a href="http://120.27.21.149:9089/bimonline_admin_video/dist/#/bim_online_project" target="_blank" style="font-size: 12px;padding-right: 3px;">bimonlineAdmin</a>
            <br>
            项目描述：设计页面结构，选择UI框架，然后利用vue2+elementUI+axios实现项目页面布局和交互，并且经常与产品经理沟通解决项目开发过程中的问题。
            <br>
            2.在现场pc端。项目名称:<a href="http://120.27.21.149:9089/bimonlinePC/dist/index.html#/project_overview" target="_blank" style="font-size: 12px;padding-right: 3px;">bimonlinePC</a>
            <br>
            项目描述：利用vue2+elementUI+axios实现项目页面布局和交互，和设计师沟通根据设计图实现到页面，及时与开发组沟通解决开发过程中的问题。
            <br>
            3.参与uniapp app开发，数据大屏展示利用echart进行数据展示。
            <br>
            4.协助运维中心张瑞瑞解决前端页面文案修改。
            <br>
            5.数据链的项目文件浏览器，项目名称:webfolder。通过vue2+elementUI+axios实现项目页面和交互。开发过程中和后台人员协作测试接口。
        </p>
    </div>

    <div id="step-5" class="step" data-x="0" data-y="702" data-z="0" data-rotate-z="180" data-rotate-y="-180"
         data-rotate-order="zyx">
        <p>工作成果三</p>
        <p style="
            font-size: 16px;
            line-height: 40px;
        ">
            1.在工作中利用自己git的使用经验帮助同事通过git解决一些相关问题。前端项目的工程化。
            <br>
            2.多人协作时出现的代码冲突，应用webstrom上功能结合git的合并代码解决代码冲突；
            <br>
            3.项目文件推到新的远程仓库总结为以下命令；
            <br>
        <p style="font-size: 12px; line-height: 20px;">
            git init
            <br>
            git remote add origin git@gitee.com:minyanan/bimonlinePC.git
            <br>
            git add .
            <br>
            gcmsg "first commit"
            <br>
            git fetch origin
            <br>
            git branch --set-upstream-to=origin/master master
            <br>
            git pull --rebase
            <br>
            git push
            <br>
        </p>

        <pre style="font-size: 12px; margin-left: -15px">
         4.vue 项目搭建npm run build 后的页面空白bug的总结，以下是解决方式
        project_name/ build/webpack.base.conf.js  在 rules数组中添加：
        {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
        },
        project_name/config/index   assetsPublicPath: './',
        project_name/build/utils.js  在ExtractTextPlugin.extract中添加 ：publicPath: '../../'
        </pre>
        </p>
    </div>

    <div id="step-6" class="step" data-x="379" data-y="780" data-z="270" data-rotate-z="135" data-rotate-y="-225"
         data-rotate-order="zyx">
        <p>2019年规划</p>
        <p style="
            font-size: 16px;
            line-height: 40px;
        ">
            1.深入原生javascript的理解并且应用它。
            <br>
            2.积累更多的vue使用经验，深入理解mvvm模式的web前端框架的优点。
            <br>
            3.熟悉React(React多年来一直主导Web开发，2018年它根本没有放慢速度。根据Stackoverflow调查，它仍然是最受欢迎的库之一) <br>
            4.多用技术实现自己的想法，比如说，利用好时间给做一个员工管理系统，品牌分申请统计，考勤录入，人员绩效考核，人员加班申请，加班时间录入统计等模块。 <br>
            5.根据产品设计与后端人员协作继续完成binonlinePC项目，webfloder项目，以及其他项目的维护、bug修复等
        </p>
    </div>
    <div id="step-7" class="step" data-x="700" data-y="350" data-z="350" data-rotate-z="90" data-rotate-y="-270"
         data-rotate-order="zyx">
        <p>感恩</p>
        <p style="
            font-size: 16px;
            line-height: 40px;
            text-indent: 2em;
        ">
            在以后的岁月里，我的工作一定会越来越努力的，尽量不会出现任何的差错，这对我是必须要要求的，一定要做到为公司的事业尽出自己最大的努力!
            我相信在公司全体领导职工的集体努力下，我们公司的BIM部门一定会较去年去的长远的进步，公司的明天也会更加的美好、强大!
            我也会在不断的学习中进步，帮助公司实现梦想，也不辜负领导和同事对我的期望! <br>
            感谢公司各级领导给了我成长的空间，勇气和信心。我会继续不断努力工作， 为这个集体的进展尽自己的一份力!
        </p>
    </div>

    <div id="step-8" class="step" data-x="379" data-y="-70" data-z="270" data-rotate-z="45" data-rotate-y="-315"
         data-rotate-order="zyx"
         data-goto-next="step-1">
        <p>结束</p>
        <p style="
            font-size: 16px;
            line-height: 40px;
            text-indent: 2em;
        ">
            报告结束，继续努力，加油！
        </p>
    </div>
</div>

<div id="impress-toolbar"></div>
<div id="impress-help"></div>

<script type="text/javascript" src="./js/impress.js"></script>
<script>impress().init();</script>

</body>
</html>
